<template>
	<view>
		<!-- 搜索组件 -->
		<view class="search-box">
		  <my-search @click="gotoSearch"></my-search>
		</view>
		
		<!-- 轮播图的区域 -->
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
		  <swiper-item v-for="(item, i) in swiperList" :key="i">
			<!-- nav才可以跳转到链接 -->
		    <navigator class="swiper-item" :url="'/subpkg/goods_detail/goods_detail?goods_id=' + item.goods_id">
		      <image :src="item.image_src"></image>
		    </navigator>
			
			<!-- <view class = 'swiper-item'> -->
				<!-- 动态绑定图片的src属性 -->
				<!-- <image :src = 'item.image_src'></image> -->
			<!-- </view> -->
		  </swiper-item>
		</swiper>	
		
		<!-- 分类导航区域 -->
		<view class="nav-list">
		  <view class="nav-item" v-for="(item, i) in navList" :key="i" @click="navClickHandler(item)">
		    <image :src="item.image_src" class="nav-img"></image>
		  </view>
		</view>
		
		<!-- 楼层区域 -->
		<!-- 楼层的容器 -->
		<view class="floor-list">
		  <!-- 每一个楼层的 item 项 -->
		  <view class="floor-item" v-for="(item, i) in floorList" :key="i">
		    <!-- 楼层的标题 -->
		    <image :src="item.floor_title.image_src" class="floor-title"></image>
		    <!-- 楼层的图片区域 -->
		    <view class="floor-img-box">
		      <!-- 左侧大图片的盒子 -->
		      <navigator class="left-img-box" :url="item.product_list[0].url">
		        <image :src="item.product_list[0].image_src" :style="{width: item.product_list[0].image_width + 'rpx'}" mode="widthFix"></image>
		      </navigator>
		      <!-- 右侧 4 个小图片的盒子 -->
		      <view class="right-img-box">
		        <navigator class="right-img-item" v-for="(item2, i2) in item.product_list" :key="i2" v-if="i2 !== 0" :url="item2.url">
		          <image :src="item2.image_src" :style="{width: item2.image_width + 'rpx'}" mode="widthFix"></image>
		        </navigator>
		      </view>
		    </view>
		  </view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 1.轮播图的数据列表，默认为空数组
				// swiperList:[{"image_src":"https://api-hmugo-web.itheima.net/pyg/banner1.png","open_type":"navigate","goods_id":129,"navigator_url":"/pages/goods_detail/main?goods_id=129"},
				// 		{"image_src":"https://api-hmugo-web.itheima.net/pyg/banner2.png","open_type":"navigate","goods_id":395,"navigator_url":"/pages/goods_detail/main?goods_id=395"},
				// 		{"image_src":"https://api-hmugo-web.itheima.net/pyg/banner3.png","open_type":"navigate","goods_id":38,"navigator_url":"/pages/goods_detail/main?goods_id=38"}],
				swiperList:[],
				// 分类导航的数据列表
				navList: [],
				
				// 楼层的数据
				floorList: []
			};
		},
		// onLoad(){
		// 	// 2.在小程序页面刚加载时，调用获取轮播图数据的方法
		// 	this.getSwiperList()
		// },
		onLoad() {
		  // 调用方法，获取轮播图的数据
		  console.log('11111')
		  this.getSwiperList()
		  this.getNavList()
		  this.getFloorList()
		  // this.getNavList()
		  // this.getFloorList()
		},
		// mounted() {
		//     // 当组件挂载到DOM上后，会执行这里的代码
		//     console.log('组件已加载完成');
		// 	this.getSwiperList()
		//     // 在这里执行你需要的操作
		//   },
		methods: {
		  async getSwiperList() {
		    const { data: res } = await uni.$http.get('/api/public/v1/home/swiperdata')
		    // 请求失败
		    if (res.meta.status !== 200) return uni.$showMsg()
		
		    this.swiperList = res.message
		  },
		  async getNavList() {
		    const { data: res } = await uni.$http.get('/api/public/v1/home/catitems')
		    if (res.meta.status !== 200) return uni.$showMsg()
		    this.navList = res.message
		  },
		  // async getNavList() {
		  //   const { data: res } = await uni.$http.get('/api/public/v1/home/catitems')
		  //   if (res.meta.status !== 200) return uni.$showMsg()
		  //   this.navList = res.message
		  // },
		  navClickHandler(item) {
		    if (item.name === '分类') {
		      uni.switchTab({
		        url: '/pages/cate/cate'
		      })
		    }
		  },
		  // 获取首页楼层数据的方法
		  async getFloorList() {
		    const { data: res } = await uni.$http.get('/api/public/v1/home/floordata')
		    if (res.meta.status !== 200) return uni.$showMsg()
		
		    // 对数据进行处理
		    res.message.forEach(floor => {
		      floor.product_list.forEach(prod => {
		        prod.url = '/subpkg/goods_list/goods_list?' + prod.navigator_url.split('?')[1]
				console.log('prod:',prod.url)
		      })
		    })
		    this.floorList = res.message
		  },
		  gotoSearch() {
		    uni.navigateTo({
		      url: '/subpkg/search/search'
		    })
		  }
		}
		
	}
</script>

<style lang="scss">
	swiper {
	  height: 330rpx;
	
	  .swiper-item,
	  image {
	    width: 100%;
	    height: 100%;
	  }
	}
	
	.nav-list {
	  display: flex;
	  justify-content: space-around;
	  margin: 15px 0;
	
	  .nav-img {
	    width: 128rpx;
	    height: 140rpx;
	  }
	}
	
	.floor-title {
	  width: 100%;
	  height: 60rpx;
	}
	
	.right-img-box {
	  display: flex;
	  flex-wrap: wrap;
	  justify-content: space-around;
	}
	
	.floor-img-box {
	  display: flex;
	  padding-left: 10rpx;
	}
	
	.search-box {
	  position: sticky;
	  top: 0;
	  z-index: 999;
	}
</style>
